<template>
  <AuModal
    v-model="showGroupPopup"
    :title="groupTitle"
    :padding="false"
    v-bind="$attrs"
    @handleConfirm="formRef.submit()"
  >
    <div class="flex justify-center py-[30px] px-[20px]">
      <AuForm
        v-if="showGroupPopup"
        ref="formRef"
        :formList="formList"
        :formData="selfFormData"
        :isInline="false"
        :hiddenBtn="true"
        class="!w-[386px]"
        @submit="submit"
      />
    </div>
  </AuModal>
</template>

<script setup lang="ts">
import { AuModal } from "@/components/AuModal";
import { AuForm } from "@/components/AuForm";
import { computed, ref, toRef, watch } from "vue";
import { BaseProps } from "@/components/AuForm/type";
import { getGroupList, GroupProp } from "@/api/teaInfuser/store";
import { handleTree } from "@/utils/tree";
import { ACTION_TYPE } from "@/components/AuTable/type";
import { getReleaseSelect } from "@/api/teaInfuser/formula";
import { storeGroupSelect } from "@/utils/formSelect";
import { useI18n } from "vue-i18n";

interface Props {
  modelValue: boolean;
  actionType: ACTION_TYPE;
  formData?: Partial<GroupProp>;
}

const { t } = useI18n();
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});
const emit = defineEmits(["update:modelValue", "submit"]);

const groupTitle = ref(t("store_group.form.add_store_group"));
const formList = ref<(BaseProps | any)[]>([
  // {
  //   type: "el-tree-select",
  //   key: "parent_id",
  //   label: "分组",
  //   placeholder: "请选择分组",
  //   checkStrictly: true,
  //   renderAfterExpand: false,
  //   disabled: false,
  //   props: {
  //     value: "id",
  //     label: "name"
  //   },
  //   required: true,
  //   data: []
  // },
  // () =>
  //   storeGroupSelect(
  //     "parent_id",
  //     {
  //       label: t("store_group.form.group"),
  //       props: {
  //         checkStrictly: true
  //       }
  //     },
  //     false
  //   ),
  {
    type: "el-cascader",
    key: "parent_id",
    label: "device_manage.form.store_group",
    placeholder: "device_manage.form.select_store_group",
    checkStrictly: true,
    renderAfterExpand: false,
    props: {
      value: "id",
      label: "name"
    },
    data: []
  },
  {
    type: "el-input",
    key: "name",
    label: "store_group.form.group_name",
    placeholder: "store_group.form.enter_group_name",
    maxlength: 30,
    required: true
  },
  {
    type: "el-input",
    key: "info",
    label: "store_group.form.description",
    placeholder: "store_group.form.enter_description",
    maxlength: 200
  }
]);
const selfFormData = toRef(props, "formData");
const showGroupPopup = computed({
  get() {
    return props.modelValue;
  },
  set(val: boolean) {
    emit("update:modelValue", val);
  }
});

const formRef = ref();

const getGroupSelectList = async () => {
  const select = await storeGroupSelect(
    "parent_id",
    {
      label: "device_manage.form.store_group",
      props: {
        checkStrictly: true
      }
    },
    false
  );

  formRef.value.setFormProps("parent_id", select);
};

// TODO: 英文用的全国，需要怎么修改
const getTreeSelect = async () => {
  let name = "全国";
  try {
    const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
    const username = userInfo.username;
    if (username.include("霸王茶")) {
      name = "霸王中国总部";
    } else {
      name = "全国";
    }
  } catch (e) {
    name = "全国";
  }
  const response = await getReleaseSelect({
    start_page: 1,
    size: 0
  });

  const data = { id: "0", name, children: [] };
  if (response.data != null) {
    data.children = response.data;
  }
  await formRef.value.setFormProps("parent_id", {
    data: [data],
    disabled: props.actionType !== ACTION_TYPE.TADD
  });
};

const submit = (data: any) => {
  emit("submit", data);
};

watch(
  () => [showGroupPopup.value, props.formData],
  ([val, row]: [boolean, GroupProp]) => {
    if (val) {
      getTreeSelect();
      getGroupSelectList();
      // debugger;
      groupTitle.value = row?.id
        ? t("store_group.form.edit_store_group")
        : t("store_group.form.add_store_group");
      selfFormData.value = row;
    } else {
      formRef.value.reset();
    }
  }
);

// watch(
//   () => props.formData,
//   val => {
//     groupTitle.value = val.id ? "编辑门店分组" : "添加门店分组";
//     selfFormData.value = val;
//   },
//   { deep: true }
// );
</script>
